<template>
  <div class="dept-day-chart-div"
       ref="unsatifyChartDiv"
       id="unsatifyChartDiv"></div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import pieEchartsOption from '@/utils/echarts/pie.js' // 引用统计图样式
  let echarts = require('echarts/lib/echarts')
  export default {
    data () {
      return {

      }
    },
    created () {
      this.getDeptUnsatisfyCharts()
    },
    methods: {
      // 处室不满意件环形图
      getDeptUnsatisfyCharts () {
        this.unsatifyDivLoading = true
        this.$axios.post(this.$api.homeCharts.deptUnsatisfyCharts).then(rs => {
          if (rs) {
            this.deptDayListData = rs
            let unsatifyLegendData = this.deptDayListData.map(item => ({
              name: `${item.name}`,
              value: item.value
            }))
            this.unsatifyDivLoading = false
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.unsatifyChartDiv)
            if (!myChart) return
            // 绘制图表
            let colorsList = [
              '#D87A80',
              '#FFB980',
              '#E5CF0D',
              '#97B552',
              '#2EC7C9',
              '#5AB1EF',
              '#B6A2DE',
              '#AA8C8A',
              '#909399',
              '#D87A80',
              '#FFB980',
              '#E5CF0D',
              '#97B552',
              '#2EC7C9',
              '#5AB1EF',
              '#B6A2DE',
              '#AA8C8A',
              '#909399'
            ]
            let myechartsOy = {
              title: {
                text: this.$moment().format('YYYY') + '年各处室不满意件统计',
                x: 'left',
                left:'18%'
              },
              color: colorsList,
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} ({d}%)'
              },
              series: [
                {
                  name: '不满意件',
                  radius: ['40%', '60%'],
                  roseType: '',
                  data: unsatifyLegendData,
                  itemStyle: {
                    normal: {
                      label: {
                        show: false
                      },
                      labelLine: {
                        show: true
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
            myechartsOy = pieEchartsOption(myechartsOy)
            myChart.setOption(myechartsOy)
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .dept-day-chart-div {
    width: 100%;
    height: 360px;
    padding-top: 20px;
  }
</style>
